
<template>
	<el-card>
		<!-- 搜索 -->
		<el-form :model="searchData" inline ref="searchFormRef" v-resize="searchResize" label-width="70px">
			<el-form-item label="学生姓名" prop="studentName">
				<el-input v-model="searchData.studentName" placeholder="请输入学生姓名" clearable></el-input>
			</el-form-item>
			
			<el-form-item>
				<el-button icon="el-icon-search" type="primary" @click="searchClick">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="resetClick">重置</el-button>
				<el-button icon="el-icon-plus" type="success" v-has="'sys:parent:add'" @click="addShowClick">新增</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格渲染 -->
		<YwTable ref="tableRef" :searchData="searchData" :tableProps="tableProps" api="sysParentFindAllByPage">
			<el-table-column slot="table_oper" label="操作" fixed="right" width="170px">
				<template v-slot="scope">
						<el-button type="text" icon="el-icon-edit" @click="editShowClick(scope.row)"
							v-has="'sys:parent:edit'">修改</el-button>
						<el-button type="text" icon="el-icon-delete" @click="deleteClick(scope.row)"
							v-has="'sys:parent:delByIds'">删除</el-button>
				</template>
			</el-table-column>
		</YwTable>

		<!-- 添加/修改 -->
		<YwDialog @confirm="confirmClick" width="400px" ref="ywDialogRef" title="修改信息">
			<template slot="form">
				<el-form :model="curData" inline ref="curFormRef" label-width="95px" :show-message="false">
				
					<el-row style="text-align: center">
						<el-form-item label="微信头像" prop="parentVxtx">
							<YwUpload rootPath="sys/" v-model="curData.parentVxtx"></YwUpload>
						</el-form-item>
					</el-row>

					<el-row style="text-align: center">
						<el-form-item label="微信账号" prop="parentVxid" required label-width="100px">
							<el-input v-model="curData.parentVxid" placeholder="请输入家长微信账号"></el-input>
						</el-form-item>				  
				   </el-row>
					
				   <el-row style="text-align: center">
						<el-form-item label="亲属关系" prop="parentRelation" required>
							<el-input v-model="curData.parentRelation" placeholder="请输入亲属关系"></el-input>
						</el-form-item>
				    </el-row>

					<el-row style="text-align: center">
					<el-form-item label="学生姓名" prop="studentIdList" required>
						<el-cascader ref="cascaderAddr"
						:options="options" 
						:show-all-levels="false" 
						v-model="kgClassStuIdList" 
						:props="params" 
						@change="handleChange" clearable filterable></el-cascader>
					</el-form-item>
				</el-row>
				
				</el-form>
			</template>
		</YwDialog>

	</el-card>
</template>

<script>
	export default {

		data() {
			return {
				//搜索条件
				searchData: {
					studentName:null
				},
				//添加/修改信息数据
				curData: {
					id:null,
                    parentVxid: null,
                    parentVxtx: null,
                    parentRelation: null,
                    studentIdList: []
				
				},
				//表格数据
				tableProps: [{
						label: "家长微信账号",
						prop: "parentVxid"
					},
					{
						label: "家长微信头像",
						prop: "parentVxtx",
						type: "avatar"
					},
					{
						label: "亲属关系",
						prop: "parentRelation"
					},
					{
						label: "学生姓名",
						prop: "studentNameList",
						type:"tagList"
					}
				],	
				//多级联动的数据
				kgClassStuIdList:[],
				options: [],
				params: {
					multiple: true ,//是否可以多选
					label: 'lable',  
					value: 'value',//指定选项的值为选项对象的某个属性值
					children: 'children' //将后端返回的子选项字段children的值 赋值给默认的children
				} 
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.tableRef.shuaxin(this.searchData)
			})
		},
		methods: {

//多级数据截取学生id
			handleChange(value) {
				let studentIdList = [];
				for (let i = 0; i < value.length; i++) {
					let stuId = value[i][2];
					studentIdList.push(stuId);
				}
				this.curData.studentIdList = studentIdList;	
			  },


		//三级联动数据获取方法
			getKgClassStu(){
				this.$api.sysKgClassStuList().then(data => {	
					this.options = data; 
				});
			},		
			//添加/修改表单的确认按钮
			confirmClick() {
				let data = JSON.parse(JSON.stringify(this.curData))
				this.$refs.curFormRef.validate(async (valid) => {
					 if (valid) {
						if (data.id) {
							//修改操作
							await this.$api.sysParentEdit(data);
						} else {
							//添加操作
							await this.$api.sysParentAdd(data);
						}
						this.$refs.ywDialogRef.close()
						this.searchClick()
					} 
				});
			},
			//新增按钮
			addShowClick() {
				this.curData = {
					parentVxid: null,
                    parentVxtx: null,
                    parentRelation: null,
					studentIdList:[]
				};
				this.kgClassStuIdList=[];
				this.$refs.ywDialogRef.open()
				//获取三级联动数据
				this.getKgClassStu();
			},
			//修改按钮
			editShowClick(row) {				
				this.$refs.ywDialogRef.open()
				//获取三级联动数据
				this.getKgClassStu();
				//给表单赋值
				this.$api.sysParentFindById(row.id).then((result) => {
					this.curData = result;//实现表单赋值
					this.kgClassStuIdList = result.kgClassStuIdList;//获取学生默认值
				})	
			},
			//删除事件
			deleteClick(row) {
				this.$common.msgBoxDel(() => {
					this.$api.sysParentDelByIds(row.id).then(res => {
						this.searchClick();
					});
				})
			},			

			//搜索按钮
			searchClick() {
				this.$refs.tableRef.shuaxin(this.searchData)
			},
			//搜索重置
			searchResize(data) {
				this.$refs.tableRef.refreshSize(data)
			},
			//重置按钮
			resetClick() {
				this.$refs.searchFormRef.resetFields();
				this.searchClick()
			},
		},
	};
</script>

<style lang="scss" scoped>
</style>